import { useState } from "react";
import reactLogo from "./assets/react.svg";
import "./App.css";
import {
  BrowserRouter,
  Routes,
  Route,
  Link,
  useSearchParams,
  useParams,
} from "react-router-dom";
import { useNavigate } from "react-router-dom";

const Home = () => {
  const navigate = useNavigate();
  const params = useParams();
  console.log("id----", params.id);
  return (
    <div>
      this is Home
      <button onClick={() => navigate("/about?id=100")}>to-about</button>
    </div>
  );
};

const About = () => {
  const [params] = useSearchParams();
  const navigate = useNavigate();
  const id = params.get("id");
  console.log("id====", id);
  return (
    <div>
      this is about<button onClick={() => navigate("/404")}>to home</button>
    </div>
  );
};

/**
 * 路由实现步骤 输入 这个是什么
 * 1. 最外层用BroswerRouter 组件包L这个司法裹
 * 2. Link 组件用于切换路由导航
 * 3. <Routes></Routes> 组件用于包裹多个具体路由页面
 * 4. <Route></Route> 具体路由页面
 * 5. 输入中文看看
 *
 * 路由传参：两种方式 params传参 searchParams传参。
 * searchParams
 * 1. 路由跳转时使用， navigate("/about?id=100")
 * 2. 在组件中使用useSearchParams获取参数。 let [params] = useSearchParams(); let id = params.get("id")
 * params传参
 * 1. 路由声明时明确好参数格式。 <Route path="/about/:id" />
 * 2. 路由跳转时传入参数， navigate("/about/200")
 * 3. 在组件中通过 useParams() 获取参数。 let params = useParams(); let id = params.get("id")
 */
function App() {
  const [count, setCount] = useState(0);
  return (
    <div className="App">
      <BrowserRouter>
        <Link to="/">首页-声明式</Link>
        <Link to="/about">关于-声明式</Link>
        {/* <button onClick={()=>navigate("/")} >首页-编程式</button> */}
        {/* <button onClick={()=>navigate("/about")} >首页-编程式</button> */}
        <Routes>
          <Route path="/:id" element={<Home />} />
          <Route path="/about" element={<About />} />
        </Routes>
      </BrowserRouter>
    </div>
  );
}

export default App;
